<template>
	<div id="app">
		<headers>123</headers>
		<div class="main">
			<router-view keep-alive></router-view>
		</div>
		<span>{{title}}</span>
		<footers></footers>
	</div>
</template>

<script>
import Footers from './components/Footers'
import Headers from './components/Head'

import store from './vuex/store'
import {updateHeadBackshow, updateTitle, updateHeadFocusshow} from './vuex/action'

export default {
	components: {
		Footers,
		Headers
	},
	store,
	vuex: {
		getters: {
			show: function (state) {
				return state.head.backShow
			},
			test: function (state) {
				return state.title
			}
		},
		actions: {
			updateHeadBackshow,
			updateHeadFocusshow,
			updateTitle
		}
	},
	watch: {
		// 是否显示‘返回按钮’
		// '$route.backShow': function (val) {
		//	console.log(val)
			// updateTitle('test')
		//	this.updateHeadBackshow(val)
			// this.show = val
		// },
		// 标题显示
		// '$route.title': function (val) {
		// 	if (val) this.updateTitle(val)
		// },
		// 关注显示
		'$route.focusShow': function (val) {
			this.updateHeadFocusshow(val)
		}
	},
	ready: function () {
		// 初始化页面内容
		// 获取当前路由信息
		// let route = this.$route
		// 显示head中的title信息
		// if (route.matched[0].handler.title) this.updateTitle(route.matched[0].handler.title)
		// 判断是否显示返回按钮
		// if (route.backShow) this.updateHeadBackshow(route.backShow)
	}
}
</script>
<style lang="less">
	@import "./../node_modules/bootstrap/less/bootstrap.less";
	#app{
		font-family: 'microsoft yahei';
	}
	.main {
		padding-top: 40px;
		padding-bottom: 35px;
	}
	html, body {
		height: 100%;
	}
</style>
